<template>
  <div style="padding: 15px">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="车牌号" prop="licenseNumber">
        <el-autocomplete
          v-model="form.licenseNumber"
          :fetch-suggestions="(queryString, cb) => querySearchAsync(queryString, cb, 'licenseNumber')"
          placeholder="请输入车牌号"
          :clearable="true"
          @select="handleSelect"
        />
      </el-form-item>
      <el-form-item label="司机" prop="damegeDriverCode">
        <el-autocomplete
          v-model="form.driverName"
          :fetch-suggestions="(queryString, cb) => querySearchAsync(queryString, cb, 'driverName')"
          placeholder="请选择司机"
          :clearable="true"
          @select="handleSelect"
        />
      </el-form-item>
      <el-form-item label="维修日期" prop="repairTime">
        <el-date-picker
          v-model="form.repairTime"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
      <el-form-item label="维修地点" prop="repairPlace">
        <el-input v-model="form.repairPlace" placeholder="请输入维修地点" />
      </el-form-item>
      <el-form-item label="维修人姓名" prop="repairPerson">
        <el-input v-model="form.repairPerson" placeholder="请输入维修人姓名" />
      </el-form-item>
      <el-form-item label="维修人电话" prop="repairPersonPhone">
        <el-input v-model="form.repairPersonPhone" placeholder="请输入维修人电话" />
      </el-form-item>
      <el-form-item label="维修单号" prop="repairOrderNo">
        <el-input v-model="form.repairOrderNo" placeholder="请输入维修单号" />
      </el-form-item>
      <el-form-item label="维修费用" prop="repairAmount">
        <el-input type="number" v-model="form.repairAmount" placeholder="请输入维修费用" />
      </el-form-item>
      <el-form-item label="损坏部位" prop="damegeRemark">
        <el-input v-model="form.damegeRemark" placeholder="请输入损坏部位" />
      </el-form-item>
      <el-form-item label="损坏原因分析" prop="damegeReason">
        <el-input type="textarea" v-model="form.damegeReason" placeholder="请输入损坏原因分析" />
      </el-form-item>
      <el-form-item label="汽车配件" prop="autoParts">
        <el-input v-model="form.autoParts" placeholder="请输入汽车配件" />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" placeholder="请输入备注" />
      </el-form-item>
      <el-form-item>
        <el-button @click="funcCancel">取 消</el-button>
        <el-button type="primary" @click="funcSubmit">确 定</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import Vue from "vue";
import "xe-utils";
import VXETable from "vxe-table";
import "vxe-table/lib/index.css";
import { addVehicleRepair } from "@/api/vehicleService";
Vue.use(VXETable);
export default {
  name: "VehicleRepairAdd",
  props: {
    restaurants: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      tempData: null,
      form: {
        damegeVehicleCode: "",
        damegeDriverCode: "",
        repairVehicleCode: "",
        repairDriverCode: "",
        repairTime: "",
        repairPlace: "",
        repairPerson: "",
        repairOrderNo: "",
        repairAmount: "",
        damegeRemark: "",
        damegeReason: "",
        autoParts: "",
        remark: "",
        repairPersonPhone: "",
        licenseNumber: "",
        driverName: ""
      },
      rules: {
        licenseNumber: [
          { required: true, message: "请输入车牌号", trigger: "change" }
        ],
        damegeDriverCode: [
          { required: true, message: "请输入司机", trigger: "change" }
        ],
        repairTime: [
          { required: true, message: "请输入维修日期", trigger: "blur" }
        ],
        repairPlace: [
          { required: true, message: "请输入维修地点", trigger: "blur" }
        ],
        repairPerson: [
          { required: true, message: "请输入维修人姓名", trigger: "blur" }
        ],
        repairPersonPhone: [
          { required: true, message: "请输入维修人电话", trigger: "blur" }
        ],
        repairOrderNo: [
          { required: true, message: "请输入维修单号", trigger: "blur" }
        ],
        repairAmount: [
          { required: true, message: "请输入维修费用", trigger: "blur" }
        ],
        damegeRemark: [
          { required: true, message: "请输入损坏部位", trigger: "blur" }
        ],
        damegeReason: [
          { required: true, message: "请输入损坏原因分析", trigger: "blur" }
        ],
        autoParts: [
          { required: true, message: "请输入汽车配件", trigger: "blur" }
        ],
        remark: [{ required: true, message: "请输入备注", trigger: "blur" }]
      }
    };
  },
  methods: {
    // 提交
    funcSubmit() {
      if (!this.tempData) {
        this.$message({ message: "请选择司机或车辆！", type: "error" });
        return false;
      }

      this.$refs["form"].validate(valid => {
        if (valid) {
          const rLoading = this.openLoading();
          this.form.repairVehicleCode = this.form.damegeVehicleCode;
          this.form.repairDriverCode = this.form.damegeVehicleCode;
          addVehicleRepair(this.form)
            .then(response => {
              rLoading.close();
              this.tempData = null;
              this.$message({ message: response.msg, type: "success" });
              this.$emit("hideModel");
            })
            .then(() => this.$refs["form"].resetFields());
        } else {
          return false;
        }
      });
    },
    // 取消
    funcCancel() {
      this.$emit("hideModel");
    },
    /**
     * 模糊查询
     * 车牌号/司机
     */
    querySearchAsync(queryString, cb, word) {
      var temArr1 = this.filterList(queryString, word);
      temArr1.forEach(item => {
        item.value = item[word];
      });
      cb(temArr1);
    },
    filterList(queryString, word) {
      var list = this.restaurants.filter(item => {
        if (item[word]) {
          return item[word].indexOf(queryString) > -1;
        }
      });
      return list;
    },
    handleSelect(item) {
      this.tempData = item;
      this.form.damegeVehicleCode = item.code;
      this.form.damegeDriverCode = item.partyCode;
      this.form.driverName = item.driverName;
      this.form.licenseNumber = item.licenseNumber;
    }
  }
};
</script>
<style lang="scss" scoped>
.el-date-editor {
  width: 100%;
}
.el-autocomplete {
  width: 100%;
}
</style>
